/*
 * SmartFlow 统一设计系统样式 - 基于 flow/list 页面风格
 *
 * @Author:    SmartFlow Team
 * @Date:      2024-01-01
 * @Copyright  SmartFlow Design System
 */

// ==================== 基础组件样式 ====================

// 页面容器
.smart-page {
  min-height: 100vh;
  background-color: #f5f5f5;

  &--white {
    background-color: #ffffff;
  }
}

// 内容容器
.smart-container {
  width: 100%;
  padding: 0;
  box-sizing: border-box;

  &--padded {
    padding: 0 25rpx;
  }
}

// 标准卡片组件 - 基于 flow 页面风格
.smart-card {
  width: 700rpx;
  margin: 30rpx auto 0;
  background: #ffffff;
  border-radius: 12rpx;
  box-shadow: 0px 3px 4px 0px rgba(24, 144, 255, 0.06);
  padding: 26rpx 30rpx 20rpx;
  box-sizing: border-box;

  &:first-child {
    margin-top: 20rpx;
  }

  &--no-padding {
    padding: 0;
  }

  &--large-padding {
    padding: 40rpx;
  }
}

// Flexbox 布局
.smart-flex {
  display: flex;

  &--column {
    flex-direction: column;
  }

  &--wrap {
    flex-wrap: wrap;
  }
}

.smart-justify {
  &--center {
    justify-content: center;
  }

  &--between {
    justify-content: space-between;
  }
}

.smart-align {
  &--center {
    align-items: center;
  }
}

.smart-flex-item {
  &--1 {
    flex: 1;
  }
}

// 间距工具类
.smart-mt {
  &--sm { margin-top: 16rpx; }
  &--md { margin-top: 32rpx; }
  &--lg { margin-top: 48rpx; }
}

.smart-mr {
  &--sm { margin-right: 16rpx; }
  &--md { margin-right: 32rpx; }
}

.smart-mb {
  &--sm { margin-bottom: 16rpx; }
  &--md { margin-bottom: 32rpx; }
  &--lg { margin-bottom: 48rpx; }
}

.smart-ml {
  &--xs { margin-left: 8rpx; }
  &--sm { margin-left: 16rpx; }
}

.smart-pt {
  &--md { padding-top: 32rpx; }
}

.smart-py {
  &--xl { padding-top: 64rpx; padding-bottom: 64rpx; }
}

// 文本样式
.smart-text {
  &--center { text-align: center; }
}

.smart-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

// 宽度
.smart-w {
  &--full { width: 100%; }
}

// 卡片头部组件
.smart-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  position: relative;
  margin-bottom: 26rpx;

  &__title {
    width: 480rpx;
    font-size: 28rpx;
    font-weight: bold;
    color: #444;
  }

  &__action {
    position: absolute;
    right: -40rpx;
    background-size: 138rpx 60rpx;
    width: 138rpx;
    height: 60rpx;
    font-size: 28rpx;
    color: #fff;
    line-height: 50rpx;
    text-indent: 24rpx;

    &--primary {
      background-image: url('/static/images/pure-list/blue.png');
    }

    &--warning {
      background-image: url('/static/images/pure-list/orange.png');
    }
  }
}

// 信息区域组件
.smart-info-area {
  width: 100%;
  background: #f7f8f9;
  border-radius: 4px;
  padding: 20rpx 24rpx;
  box-sizing: border-box;
  margin-bottom: 30rpx;
}

// 状态点组件
.smart-status-dot {
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10rpx;
  margin-top: 6rpx;

  &__inner {
    width: 14rpx;
    height: 14rpx;
    border-radius: 50%;
  }

  &--primary {
    background: rgba(26, 154, 255, 0.2);

    .smart-status-dot__inner {
      background: rgb(26, 154, 255);
    }
  }

  &--warning {
    background: rgba(255, 108, 0, 0.2);

    .smart-status-dot__inner {
      background: rgb(255, 108, 0);
    }
  }
}

// 卡片底部组件
.smart-card-footer {
  display: flex;
  justify-content: space-between;

  &__text {
    font-size: 28rpx;
    color: #777;
  }

  &__price {
    color: #777;
    font-size: 28rpx;

    &-amount {
      font-weight: bold;
      margin-left: 4rpx;

      &--primary {
        color: #323333;
      }

      &--danger {
        color: #ff3924;
      }
    }
  }
}

// 按钮组件
.smart-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32rpx 48rpx;
  border-radius: 12rpx;
  font-size: 32rpx;
  font-weight: 500;
  line-height: 1.4;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;

  &--primary {
    background-color: #007aff;
    color: #ffffff;

    &:active {
      opacity: 0.8;
    }
  }

  &--secondary {
    background-color: #ffffff;
    color: #007aff;
    border: 1rpx solid #007aff;

    &:active {
      background-color: #f0f9ff;
    }
  }

  &--small {
    padding: 16rpx 32rpx;
    font-size: 28rpx;
  }
}

// 标题样式
.smart-title {
  &--h5 {
    font-size: 32rpx;
    font-weight: 600;
    color: #444;
    line-height: 1.4;
  }
}

// 正文样式
.smart-body {
  &--small {
    font-size: 28rpx;
    font-weight: 400;
    color: #777;
    line-height: 1.5;
  }
}

// 颜色样式
.smart-color {
  &--secondary {
    color: #777;
  }
}

.scroll-view {
  white-space: nowrap;
  width: 100%;
}

.scroll-view-item {
  display: inline-block;
  width: 570rpx;
  height: 128rpx;
  overflow: hidden;
  font-size: 36rpx;
  border-right: 1rpx solid #ededed;
  margin-right: 30rpx;
}

/**********************************  宽度 **********************************/
.smart-width-100 {
  width: 100%;
}

/**********************************  左间距 **********************************/
.smart-margin-left5 {
  margin-left: 5px;
}

.smart-margin-left10 {
  margin-left: 10px;
}

.smart-margin-left15 {
  margin-left: 15px;
}

.smart-margin-left20 {
  margin-left: 20px;
}

/**********************************  右间距 **********************************/
.smart-margin-right5 {
  margin-right: 5px;
}

.smart-margin-right10 {
  margin-right: 10px;
}

.smart-margin-right15 {
  margin-right: 15px;
}

.smart-margin-right20 {
  margin-right: 20px;
}

/******************************** 上间距 ********************************/
.smart-margin-top5 {
  margin-top: 5px;
}

.smart-margin-top10 {
  margin-top: 10px;
}

.smart-margin-top15 {
  margin-top: 15px;
}

.smart-margin-top20 {
  margin-top: 20px;
}

.smart-margin-top30 {
  margin-top: 30px;
}

.smart-margin-top40 {
  margin-top: 40px;
}

.smart-margin-top50 {
  margin-top: 50px;
}

.smart-margin-top60 {
  margin-top: 60px;
}


/******************************** 下间距 ********************************/
.smart-margin-bottom5 {
  margin-bottom: 5px;
}

.smart-margin-bottom10 {
  margin-bottom: 10px;
}

/******************************** 表单 ********************************/
.smart-form {
  height: auto;
  padding-bottom: 120px;

  :deep(.uni-forms-item__content) {
    display: flex;
    align-items: center;
  }

  :deep(.uni-forms-item__label) {
    font-size: 32rpx;
    color: #000000;
    padding-top: 28rpx;
  }

  :deep(.uni-forms-item) {
    margin-bottom: 0 !important;
  }

  :deep(.uni-slider-thumb) {
    background: #fff !important;
    border: 10rpx solid #1a9aff;
    box-sizing: border-box;
  }

  .smart-form-item {
    min-height: 100rpx;
    height: auto;
    align-items: center;
    &:last-child {
      border: none;
    }
  }

  .smart-form-group {
    box-sizing: border-box;
    width: 100wh;
    margin: 20rpx auto 0;
    background: #fff;
    border-radius: 16rpx;

    .smart-form-group-title {
      width: 100%;
      height: 84rpx;
      background-image: url('/static/images/list/form-list.png');
      background-size: 100% 84rpx;
      line-height: 84rpx;
      text-indent: 30rpx;
      font-size: 32rpx;
      color: #323333;
      font-weight: bold;
    }

    .smart-form-group-content {
      padding: 0 30rpx;
    }
    .input {
      font-size: 22rpx;
      text-align: right;
      width: 100%;
    }
  }

  .smart-form-submit {
    border-top: #eee 1px solid;
    height: 80px;
    display: flex;
    flex-direction: row;
    align-items: center;
    position: absolute;
    bottom: 0;
    background-color: white;
    width: 100%;

    .smart-form-submit-btn {
      margin: 10px;
      height: 2.5;
      flex: 1;
    }
  }

  .fixed-bottom-button {
    position: fixed;
    bottom: 0;
  }
}


/******************************** 详情 ********************************/

.smart-detail {
  .smart-detail-card {
    background-color: white;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 15px;
    width: 94%;
    border-radius: 16rpx;
    box-sizing: border-box;
    padding: 16rpx 30rpx;

    .smart-detail-card-title {
      height: 70rpx;
      display: flex;
      align-items: center;
      font-size: 32rpx;
      color: #323333;
      font-weight: bold;
      margin-bottom: 16rpx;
      &::before {
        content: '';
        height: 32rpx;
        width: 3px;
        border-radius: 4rpx;
        margin-right: 10rpx;
        background-color: #007aff;
      }
    }

    .smart-detail-card-cell {
      display: flex;
      min-height: 80rpx;
      padding: 10rpx 0;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      border-top: 1rpx solid #ededed;
      .smart-detail-card-label {
        color: #666666;
        font-size: 32rpx;
      }
      .smart-detail-card-value {
        font-size: 32rpx;
        padding: 20rpx 0;
      }
    }
  }
}








